"<html>

<head>
    <title>node.js 3.2——模板引擎</title>
    <basefont face=\"微软雅黑\" size=\"2\">
    <meta http-equiv=\"Content-Type\" content=\"text/html;charset=utf-8\">
    <meta name=\"exporter-version\" content=\"YXBJ Windows/607344 (zh-CN, DDL); Windows/10.0.0 (Win64);
        EDAMVersion=V2;\">
    <meta name=\"content-class\" content=\"yinxiang.superNote\">
    <style>
        body,
        td {
            font-family: 微软雅黑;
            font-size: 12pt;
        }
    </style>
</head>

<body>
    <a name=\"17811\">
        <h1>node.js 3.2——模板引擎</h1>

    </a>
    <div><a name=\"17811\"><span>
                <h1>简介</h1>
            </span></a>
        <div>&amp;0tab&amp;xing art-template文档<br></div>
        <h1>使用示例</h1>
        <h2>原生服务器</h2>
        <ul>
            <li>
                <div>安装</div>
            </li>
        </ul>
        <div>&lt;斜3点Tag /&gt;clike&amp;00brnpm install art-template
            --registry=https://registry.npm.taobao.org&amp;00br&lt;斜3点Tag /&gt;</div>
        <ul>
            <li>
                <div>js文件中引入art-template模块</div>
            </li>
        </ul>
        <div>&lt;斜3点Tag /&gt;clike&amp;00brconst http = require('http');&amp;00brconst fs = require('fs')&amp;00brconst
            template = require('art-template')&amp;00brconst server = http.createServer();&amp;00brserver.on('request',
            (req, res) =&gt; {&amp;00br&nbsp; fs.readFile('./index.html', (err, data) =&gt; {&amp;00br&nbsp; &nbsp; if
            (err) {&amp;00br&nbsp; &nbsp; &nbsp; res.end(\"没有找到文件\");&amp;00br&nbsp; &nbsp; } else {&amp;00br&nbsp;
            &nbsp; &nbsp; let ret = template.render(data.toString(),{&amp;00br&nbsp; &nbsp; &nbsp; &nbsp;
            name:'Jack',&amp;00br&nbsp; &nbsp; &nbsp; &nbsp; age:18,&amp;00br&nbsp; &nbsp; &nbsp; &nbsp;
            province:'北京市',&amp;00br&nbsp; &nbsp; &nbsp; &nbsp; hobbies:[&amp;00br&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
            '写代码',&amp;00br&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; '唱歌',&amp;00br&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
            '打游戏'&amp;00br&nbsp; &nbsp; &nbsp; &nbsp; ]&amp;00br&nbsp; &nbsp; &nbsp; })&amp;00br&nbsp; &nbsp; &nbsp;
            console.log(ret)&amp;00br&nbsp; &nbsp; &nbsp; res.setHeader('Content-Type',
            'text/html;charset=utf-8');&amp;00br&nbsp; &nbsp; &nbsp; res.end(ret)&amp;00br&nbsp; &nbsp; }&amp;00br&nbsp;
            });&amp;00br&amp;00br});&amp;00brserver.listen(3000, () =&gt; {&amp;00br&nbsp; console.log('服务器建立成功，请访问：\"'
            + '127.0.0.1:3000\"');&amp;00br});&amp;00br&lt;斜3点Tag /&gt;</div>
        <ul>
            <li>
                <div>index.html</div>
            </li>
        </ul>
        <div>&lt;斜3点Tag /&gt;clike&amp;00br&amp;00br&amp;00br&amp;00br&amp;00br&nbsp;
            <meta charset=\"UTF-8\">&amp;00br&nbsp;
            <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">&amp;00br&nbsp;
            <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">&amp;00br&nbsp; <title>Document
            </title>&amp;00br&amp;00br&amp;00br&amp;00br&nbsp; <p>大家好,我叫{{name}}</p>&amp;00br&nbsp; <p>今年，我{{age}}岁了</p>
            &amp;00br&nbsp; <h1>我来自{{province}}</h1>&amp;00br&nbsp; <p>我喜欢：{{each hobbies}}{{$value}} {{/each}}</p>
            &amp;00br&amp;00br&amp;00br&amp;00br&lt;斜3点Tag /&gt;
        </div>
        <h2>express服务器</h2>
        <ul>
            <li>
                <div>安装</div>
            </li>
        </ul>
        <div>&lt;斜3点Tag /&gt;javascript&amp;00brnpm i --save art-template&amp;00brnpm i --save
            express-art-template&amp;00br&lt;斜3点Tag /&gt;</div>
        <ul>
            <li>
                <div>server.js</div>
            </li>
            <ul>
                <li>
                    <div>需要对 app 进行配置</div>
                </li>
                <li>
                    <div>调用res.render 方法来加载模板文件</div>
                </li>
                <li>
                    <div><b>模板文件必须放置在</b><span style=\"background-color:
                            #fff199;\"><b>项目的views路径下</b></span><b>，并且以.art为后缀名（可以在app.engine中更改）</b></div>
                </li>
            </ul>
        </ul>
        <div>&lt;斜3点Tag /&gt;javascript&amp;00brconst express = require('express');&amp;00br&amp;00br//
            创建服务器&amp;00brconst app = express();&amp;00br// 使用 art-template 模板引擎&amp;00br//
            第一个参数指定渲染文件的后缀名，推荐使用.art结尾，和html静态文件区分开&amp;00brapp.engine('art',require('express-art-template'));
            //这句必须有&amp;00brapp.set('view options',{ // 这里是可选的配置&amp;00br&nbsp; debug: process.env.NODE_ENV !==
            'production' // debug模式在非生产环境下启动&amp;00br})&amp;00br&amp;00br//
            将对/public/的访问的url改为本文件下的/public/&amp;00brapp.use('/public/',express.static('./public/'));&amp;00br&amp;00brapp.get('/index',(req,res)=&gt;{&amp;00br&nbsp;
            // 这里的第一个参数的后缀名，必须和app.engine的第一个参数匹配&amp;00br&nbsp; res.render('index.art',{&amp;00br&nbsp; &nbsp;
            name:'张三',&amp;00br&nbsp; &nbsp; age:15,&amp;00br&nbsp; &nbsp; province:'浙江',&amp;00br&nbsp; &nbsp;
            hobbies:['唱','跳','Rap','篮球']&amp;00br&nbsp;
            });&amp;00br});&amp;00br&amp;00brapp.listen(8080,()=&gt;{&amp;00br&nbsp; console.log('请访问:
            127.0.0.1:8080');&amp;00br})&amp;00br&lt;斜3点Tag /&gt;</div>
        <div><br></div>
        <h1>语法规则</h1>
        <h2>输出</h2>
        <ul>
            <li>
                <div>template.render(str,{})</div>
            </li>
            <ul>
                <li>
                    <div>将str 中的满足标准语法的语句替换为对象中的变量</div>
                </li>
            </ul>
        </ul>
        <div>&lt;斜3点Tag /&gt;clike&amp;00br// 直接写变量名&amp;00br{{value}}&amp;00br//
            指定对象的子对象&amp;00br{{data.key}}&amp;00br// 指定对象的某个属性&amp;00br{{data['key']}}&amp;00br// 三元表达式&amp;00br{{a ? b
            : c}}&amp;00br// &amp;00br{{a || b}}&amp;00br{{a + b}}&amp;00br&lt;斜3点Tag /&gt;</div>
        <h2>条件判断</h2>
        <div>&lt;斜3点Tag /&gt;clike&amp;00br// 满足条件时显示中间的内容&amp;00br{{if value}} ... {{/if}}&amp;00br// 多条件&amp;00br{{if
            v1}} ... {{else if v2}} ... {{/if}}&amp;00br&lt;斜3点Tag /&gt;</div>
        <h2>循环</h2>
        <div>遍历数组</div>
        <div>&lt;斜3点Tag /&gt;javascript&amp;00br{{each
            list}}&amp;00br当前索引:{{$index}}&amp;00br当前遍历的对象:{{$value}}&amp;00br{{each}}&amp;00br&lt;斜3点Tag /&gt;</div>
        <div>遍历对象：</div>
        <div>&lt;斜3点Tag /&gt;python&amp;00br{{each obj}}&amp;00br&nbsp; &nbsp;
            {{$value}}&amp;00br{{/each}}&amp;00br&lt;斜3点Tag /&gt;</div>
        <div><br></div>
        <h2> 定义变量</h2>
        <div>&lt;斜3点Tag /&gt;clike&amp;00br{{set temp = data.sub.content}}&amp;00br&lt;斜3点Tag /&gt;</div>
        <h2>模板间的继承</h2>
        <div>&lt;斜3点Tag /&gt;clike&amp;00br{{extend './layout.art'}}&amp;00br&amp;00br{{block 'head'}} ...
            {{/block}}&amp;00br&lt;斜3点Tag /&gt;</div>
        <ul>
            <li>
                <div>示例:</div>
            </li>
            <li>
                <div>模板</div>
            </li>
        </ul>
        <div>&lt;斜3点Tag /&gt;clike&amp;00br<!--layout.art-->&amp;00br&amp;00br&amp;00br&amp;00br&nbsp; &nbsp;
            <meta charset=\"utf-8\">&amp;00br&nbsp; &nbsp; <title>{{block 'title'}}My Site{{/block}}</title>
            &amp;00br&amp;00br&nbsp; &nbsp; {{block 'head'}}&amp;00br&nbsp; &nbsp;
            <link rel=\"stylesheet\" href=\"main.css\">&amp;00br&nbsp; &nbsp;
            {{/block}}&amp;00br&amp;00br&amp;00br&nbsp; &nbsp; {{block
            'content'}}{{/block}}&amp;00br&amp;00br&amp;00br&lt;斜3点Tag /&gt;
        </div>
        <ul>
            <li>
                <div>继承</div>
            </li>
        </ul>
        <div>&lt;斜3点Tag /&gt;clike&amp;00br<!--index.art-->&amp;00br{{extend './layout.art'}}&amp;00br&amp;00br{{block
            'title'}}{{title}}{{/block}}&amp;00br&amp;00br{{block 'head'}}&amp;00br&nbsp; &nbsp;
            <link rel=\"stylesheet\" href=\"custom.css\">&amp;00br{{/block}}&amp;00br&amp;00br{{block
            'content'}}&amp;00br<p>This is just an awesome page.</p>&amp;00br{{/block}}&amp;00br&lt;斜3点Tag /&gt;
        </div>
        <div><br></div>
        <h2>引号处理</h2>
        <div>引号会被特殊处理，所以要替换回来</div>
        <div>&lt;斜3点Tag /&gt;javascript&amp;00brlet ret = template.render(sqltmplt,obj)&amp;00brret =
            ret.replace(/\"/g,\"\\\"\").replace(/&lt;/g,\"&lt;\").replace(/&gt;/g,\"&gt;\")&amp;00br&lt;斜3点Tag /&gt;
        </div>
        <div><br></div>
        <h1>模板工具</h1>
        <div>&lt;斜3点Tag /&gt;javascript&amp;00brconst fs = require('fs');&amp;00brconst template =
            require('art-template')&amp;00brconst fileUtils =
            require(\"E:/重要文件/BaiduNetdiskWorkspace/nodejs_utils/fileUtils\")&amp;00br&amp;00brmodule.exports =
            {&amp;00br&nbsp; &nbsp; /**&amp;00br&nbsp; &nbsp;&nbsp; * 读取xlsx,返回数据和title&amp;00br&nbsp; &nbsp;&nbsp; *
            @param {string} xlsxPath &amp;00br&nbsp; &nbsp;&nbsp; * @param {number} sheet &amp;00br&nbsp; &nbsp;&nbsp; *
            @returns &amp;00br&nbsp; &nbsp;&nbsp; */&amp;00br&nbsp; &nbsp; readXlsx (xlsxPath, sheet) {&amp;00br&nbsp;
            &nbsp; &nbsp; &nbsp; let datas = fileUtils.excelGetData(xlsxPath, sheet === undefined ? 0 :
            sheet)&amp;00br&nbsp; &nbsp; &nbsp; &nbsp; let title = fileUtils.getExcelTitle(datas)&amp;00br&nbsp; &nbsp;
            &nbsp; &nbsp; let objArr = fileUtils.excelToObj(datas)&amp;00br&nbsp; &nbsp; &nbsp; &nbsp; return
            {&amp;00br&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: objArr,&amp;00br&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
            &nbsp; title&amp;00br&nbsp; &nbsp; &nbsp; &nbsp; }&amp;00br&nbsp; &nbsp; },&amp;00br&nbsp; &nbsp;
            /**&amp;00br&nbsp; &nbsp;&nbsp; * 渲染模板&amp;00br&nbsp; &nbsp;&nbsp; * @param {string} tmplt &amp;00br&nbsp;
            &nbsp;&nbsp; * @param {object} params &amp;00br&nbsp; &nbsp;&nbsp; * @returns &amp;00br&nbsp; &nbsp;&nbsp;
            */&amp;00br&nbsp; &nbsp; getTemplate (tmplt, params) {&amp;00br&nbsp; &nbsp; &nbsp; &nbsp; return
            template.render(tmplt, {&amp;00br&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; params&amp;00br&nbsp; &nbsp;
            &nbsp; &nbsp; }).replace(/\"/g, \"\\\"\").replace(/&lt;/g,\"&lt;\").replace(/&gt;/g,\"&gt;\")&amp;00br&nbsp;
            &nbsp; },&amp;00br&nbsp; &nbsp; /**&amp;00br&nbsp; &nbsp;&nbsp; * 输出文件&amp;00br&nbsp; &nbsp;&nbsp; * @param
            {string} str &amp;00br&nbsp; &nbsp;&nbsp; * @param {string} outPath &amp;00br&nbsp; &nbsp;&nbsp;
            */&amp;00br&nbsp; &nbsp; outFile(str,outPath){&amp;00br&nbsp; &nbsp; &nbsp; &nbsp; const fd =
            fs.openSync(outPath, \"w\");&amp;00br&nbsp; &nbsp; &nbsp; &nbsp; fs.writeSync(fd,str)&amp;00br&nbsp; &nbsp;
            }&amp;00br}&amp;00br&lt;斜3点Tag /&gt;</div>
        <div><br></div>
    </div>
</body>

</html>"